<!--工作量详情-->
<template>
  <div class="app-container-add">
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      class="dialogStyleSmall"
      :before-close="cancel"
    >
      <el-form
        ref="addForm"
        class="dialog-form"
        :model="formData"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="钻机类型" prop="equipmentTypeName">
              <el-input v-model="formData.equipmentTypeName" readonly placeholder="" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地貌类型" prop="regionTypeId">
              <el-select :value="formData.regionTypeId" readonly size="medium" placeholder="">
                <el-option
                  v-for="item in regionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="workloadUnit">
              <label slot="label" v-html="`单&emsp;&emsp;位`" />
              <el-select :value="formData.workloadUnit" readonly size="medium" placeholder="">
                <el-option
                  v-for="item in workloadUnitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="maxWorkload">
              <label slot="label" v-html="`工&ensp;作&ensp;量`" />
              <el-input v-model="formData.maxWorkload" readonly placeholder="" size="medium" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { detailWorkLoad } from '@/api/superviseBaseInfo/typeConfig/workload'
export default {
  name: 'DetailDialog',
  components: {
  },
  props: {
    regionOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 单位类型
      workloadUnitOptions: [
        { value: '0', label: '米' }
      ],
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        equipmentId: '', // 设备id
        equipmentTypeName: '',
        regionTypeId: '',
        name: '', // 设备名称
        minWorkload: '', // 最小工作量
        maxWorkload: '' // 最大工作量
      }
      /* 新增 end*/
    }
  },
  methods: {
    /* 详情弹层 start*/
    // 从父组件获取参数的方法
    handleAdd(title, id) {
      const { typeName } = this.$route.query
      this.dialogTitle = title
      this.dialogVisible = true
      this.getDetailById(id, typeName)
    },
    // 获取详情
    async getDetailById(id, equipmentTypeName) {
      const { data } = await detailWorkLoad(id)
      if (data) {
        this.formData = { ...data, equipmentTypeName }
      }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    }
    /* 详情弹层 end*/
  }
}
</script>

<style scoped>
.line {
  width: 13px;
  height: 1px;
  background: #ccc;
  margin: 15px auto;
}
</style>
